

<template>
  <!-- 秒杀专场 -->
  <!-- pages/snap-up-list/snap-up-list.wxml -->
  <view class="Mall4j snap-up-list">
    <!-- 秒杀商品 -->
    <block v-for="(item, index) in seckillList" :key="item.seckillId">
      <view class="snap-up-item" @tap="toSeckillDetaile(item.seckillId)">
        <!-- 商品图片 -->
        <view class="img-box">
          <image v-if="item.pic" :src="item.pic" mode="aspectFit" />
          <image v-else src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/def.png" mode="aspectFit" />
          <!-- 倒计时栏 -->
          <view class="countdown-box">
            <text class="second-kill">{{ i18n.spike }}</text>
            <view class="countdown-content">
              <!-- 秒杀在进行 -->
              <view v-if="countDownListForShow[index].type===1">
                <text class="countdown-tips">{{ i18n.onlyEnd }}</text>
                <text class="countdown-time"><text class="countdown-tips">{{ countDownListForShow[index].day }}</text>{{ countDownListForShow[index].hou }}{{ countDownListForShow[index].min }}{{ countDownListForShow[index].sec }}</text>
              </view>
              <!-- 秒杀未开始 -->
              <view v-else>
                <text class="countdown-tips">{{ i18n.onlyStart }}</text>
                <text class="countdown-time"><text class="countdown-tips">{{ countDownListForShow[index].day }}</text>{{ countDownListForShow[index].hou }}{{ countDownListForShow[index].min }}{{ countDownListForShow[index].sec }}</text>
              </view>
            </view>
          </view>
        </view>
        <!-- 商品信息 -->
        <view class="goods-msg">
          <!-- 标题 -->
          <view class="goods-title">
            <text v-if="Number(item.reduceNum) > 0" class="discounts">{{ i18n.reduce }}{{ item.reduceNum }}{{ i18n.yuan }}</text>{{ item.prodName }}
          </view>
          <view class="residue">{{ i18n.onlyLeft }} {{ item.seckillTotalStocks }} {{ i18n.piece }}</view>
          <!-- 价格 -->
          <view class="goods-price">
            <text class="current-price">
              <text class="sub">￥</text>{{ item.seckillPrice }}</text>
            <text class="original-price">￥{{ item.price }}</text>
          </view>
          <!-- 购物车icon -->
          <view class="car-icon">
            <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/car-new.png" />
          </view>
        </view>
      </view>
    </block>
    <view v-if="seckillList.length && current === pages" class="loadall">{{ i18n.endTips }}</view>
    <!-- 空 -->
    <empty v-if="seckillList.length==0 && hadLoad" />
  </view>
</template>

<script>
// pages/snap-up-list/snap-up-list.js
var http = require('@/utils/http.js')
var util = require('@/utils/util.js')
const Big = require('@/utils/big.min.js')
import empty from '@/components/empty-tips/index.vue'

export default {

  components: {
    empty
  },
  data () {
    return {
      seckillList: [], // 秒杀商品列表
      countDownListForShow: [], // 秒杀倒计时列表
      timer: '',
      endTimeList: [],
      current: 1,
      size: 10,
      pages: 0,
      hadLoad: false // 已加载全部
    }
  },

  computed: {
    i18n () {
      return this.$t('index')
    }
  },

  /**
     * 生命周期函数--监听页面加载
     */
  onLoad: function (options) {
    this.getSkList() // 秒杀商品列表
  },

  /**
     * 生命周期函数--监听页面初次渲染完成
     */
  onReady: function () { },

  /**
     * 生命周期函数--监听页面显示
     */
  onShow: function () {
    // 头部导航标题
    uni.setNavigationBarTitle({
      title: this.i18n.spikeSpecial
    })
  },

  /**
     * 生命周期函数--监听页面隐藏
     */
  onHide: function () { },

  /**
     * 生命周期函数--监听页面卸载
     */
  onUnload: function () {
    clearTimeout(this.timer)
  },

  /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
  onPullDownRefresh: function () { },

  /**
     * 页面上拉触底事件的处理函数
     */
  onReachBottom: function () {
    if (this.current < this.pages) {
      this.current = this.current + 1
      this.getSkList()
    } else {
      this.setData({
        hadLoad: true
      })
    }
  },

  /**
     * 用户点击右上角分享
     */
  onShareAppMessage: function () { },
  methods: {
    /**
       * 获取秒杀商品列表
       */
    getSkList () {
      http.request({
        url: '/seckill/pageProd',
        method: 'GET',
        data: {
          current: this.current,
          size: this.size
        },
        callBack: res => {
          const result = res.records.filter(item => util.dateToTimestamp(item.endTime) > new Date().getTime())
          result.forEach((el) => {
            Big.DP = 2
            var price = new Big(el.price)
            var seckillPrice = new Big(el.seckillPrice)
            var reduceNum = el.price > el.seckillPrice ? price.minus(seckillPrice).valueOf() : 0
            el.reduceNum = reduceNum
          })
          this.setData({
            seckillList: res.current == 1 ? result : this.seckillList.concat(result),
            current: res.current,
            pages: res.pages,
            hadLoad: true
          })
          const endTimeList = [] // 倒计时数组
          for (let i = 0; i < this.seckillList.length; i++) {
            var objs = {}
            objs.eTime = this.seckillList[i].endTime
            objs.sTime = this.seckillList[i].startTime
            objs.countType = null // 1表示秒杀活动正在进行,0表示秒杀活动未开始
            endTimeList.push(objs)
          }
          this.setData({
            endTimeList: endTimeList
          })
          this.countdown()
        }
      })
    },

    countdown () {
      // 获取当前时间，同时得到活动结束时间数组
      const newTime = new Date().getTime()
      const endTimeList = this.endTimeList
      const countDownArr = [] // 对结束时间进行处理渲染到页面

      endTimeList.forEach(o => {
        if (newTime - util.dateToTimestamp(o.sTime) > 0) {
          const endTime = util.dateToTimestamp(o.eTime)
          let obj = null // 如果活动未结束，对时间进行处理

          if (endTime - newTime > 0) {
            const time = (endTime - newTime) / 1000 // 获取天、时、分、秒

            const day = parseInt(time / (60 * 60 * 24))
            const hou = parseInt(time % (60 * 60 * 24) / 3600)
            const min = parseInt(time % (60 * 60 * 24) % 3600 / 60)
            const sec = parseInt(time % (60 * 60 * 24) % 3600 % 60)
            obj = {
              day: this.timeFormat(day) + this.i18n.day,
              hou: this.timeFormat(hou) + ':',
              min: this.timeFormat(min) + ':',
              sec: this.timeFormat(sec),
              type: 1 // 表示秒杀正在进行

            }
          } else {
            // 活动已结束
            obj = {
              day: '00',
              hou: '00',
              min: '00',
              sec: '00'
            }
          }

          countDownArr.push(obj)
        } else {
          // 活动未开始
          const startTime = util.dateToTimestamp(o.sTime)
          const time = (startTime - newTime) / 1000
          let obj = null // 获取天、时、分、秒

          const day = parseInt(time / (60 * 60 * 24))
          const hou = parseInt(time % (60 * 60 * 24) / 3600)
          const min = parseInt(time % (60 * 60 * 24) % 3600 / 60)
          const sec = parseInt(time % (60 * 60 * 24) % 3600 % 60)
          obj = {
            day: this.timeFormat(day) + this.i18n.day,
            hou: this.timeFormat(hou) + ':',
            min: this.timeFormat(min) + ':',
            sec: this.timeFormat(sec),
            type: 0 // 表示秒杀还没开始

          }
          countDownArr.push(obj)
        }
      }) // 渲染，然后每隔一秒执行一次倒计时函数

      this.setData({
        countDownListForShow: countDownArr,
        timer: setTimeout(this.countdown, 1000)
      })
    },

    // 小于10的格式化函数
    timeFormat (times) {
      return Number(times) < 10 ? '0' + times : times
    },

    // 跳转秒杀商品详情页
    toSeckillDetaile: function (seckillId) {
      this.$Router.push({ path: '/package-activities/pages/snap-up-detail/snap-up-detail', query: { seckillId: seckillId } })
    }
  }
}
</script>
<style>
@import "./snap-up-list.css";
</style>
